/*
* 此脚本配合signup.aspx
* 验证注册表单的输入有效性
* 
* */


window.onload = init;

function init()
{
    //要在页面载入完成之后获取DOM，否则会出现null错误
    var usernameTextField = document.getElementById("username");
    var passwordTextField = document.getElementById("password");
    var passwordConfirmTextField = document.getElementById("password_confirm");
    var EmailTextField = document.getElementById("email");
    var cellphoneTextField = document.getElementById("cellphone");
    var QQTextField = document.getElementById("QQ");
    var submitButton = document.getElementById("submit");
    var notificationDiv = document.getElementById("notification");
    var initialString = "username@example.com";
    var stringInTextField = "请尽量提供一个邮箱地址";
    var emailCheckResult = true;

    //当邮箱输入框获得焦点时的行为
    EmailTextField.onfocus = function()
    {
        if (EmailTextField.value == initialString || EmailTextField.value == stringInTextField)
            EmailTextField.value = "";
    };
    
    //当邮箱输入框失去焦点时的行为
    EmailTextField.onblur = function()
    {
        if ((!EmailTextField.value) || EmailTextField.value == "")
        {
            EmailTextField.value = stringInTextField;
        }
    };
    
    //实时验证邮箱地址的有效性，将验证结果结果存储在emailCheckResult中
    EmailTextField.onkeyup = function()
    {
        var pattern = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
        if (EmailTextField.value == "")
        {
            emailCheckResult = true;
            EmailTextField.style.backgroundColor = "#ffffff";
        }
        else
        {
            if (pattern.test(EmailTextField.value))
            {
                emailCheckResult = true;
                EmailTextField.style.backgroundColor = "#aeffae";
            }
            else
            {
                emailCheckResult = false;
                EmailTextField.style.backgroundColor = "#ffb1b1";
            }
        }
    };
    
    //设置点击提交按钮时的行为
    //未填邮箱地址的情况下将其置空
    //检查各项的有效性
    submitButton.onclick = function()
    {
        //验证用户名是否为空
        if (usernameTextField.value.trim() == "")
        {
            notificationDiv.innerHTML = "用户名不能为空，请输入用户名";
            return false;
        }
        
        //验证密码是否为空
        if (passwordTextField.value.trim() == "")
        {
            notificationDiv.innerHTML = "密码不能为空，请设置密码";
            return false;
        }
        
        //验证确认密码是否为空
        if (passwordConfirmTextField.value.trim() == "")
        {
            notificationDiv.innerHTML = "请在确认密码输入框中重复输入您的密码";
        }

        //未填邮箱地址的情况下将其置空
        if (EmailTextField.value == initialString || EmailTextField.value == stringInTextField)
        {
            EmailTextField.value = "";
        }
        
        //利用前面设置的emailCheckResult来判断邮箱地址是否有效
        if (!emailCheckResult)
        {
            notificationDiv.innerHTML = "您输入的电子邮箱地址不合法，请重新输入";
            return false;
        }
        
        //验证手机号是否合法
        //注意手机号验证规则的时效性不强
        if (cellphoneTextField.value != "" && !(/^1[3|4|5|8][0-9]\d{8}$/.test(cellphoneTextField.value)))
        {
            notificationDiv.innerHTML = "您输入的手机号码不合法，请重新输入";
            return false;
        }

        if (QQTextField.value != "" && !(/^[1-9]\d{4,10}$/.test(QQTextField.value)))
        {
            notificationDiv.innerHTML = "您输入的QQ号码不合法，请重新输入";
            return false;
        }
    };
}